<template>
    <div>
        <el-dialog class="positionDialog"  title="选择目标仓"  :visible="showDialog" width="70%"
         :modal="false" :close-on-click-modal="false">
            <div class="dialog-header">
              选择目标仓
            </div>
            <TableCom ref="tableCom" :tableHead="tableHead" :tableData="tableData" :tableOperate="tableOperate"
                :delList.sync="delList">
            </TableCom>
            <PageCom :page="pageData.current" :size="pageData.size" :total="total" @handleSize="handleSize"
            @handleCurrent="handleCurrent"></PageCom>
            <div slot="footer" class="dialog-footer">
              <el-button @click="setFlage">取 消</el-button>
            </div>
      </el-dialog>
      <InsidePopu ref="addPopu" :setTableData="setTableData" :showDialog.sync="showInsideDialog"  />
      <!-- <el-dialog
      width="30%"
      title="提示"
      :visible.sync="innerVisible"
      append-to-body :close-on-click-modal="false">
      <div class="appendToBody">
        确定移垛吗？
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="innerVisible = false">取 消</el-button>
        <el-button type="primary" @click="succmBut">确定</el-button>
      </div>
    </el-dialog> -->
    </div>
</template>

<script>
import { tableApi, carDelApi,stampGetApiAA,stampMoveApi,stampGetStamp } from '@/api/cageMange'
import { selectApi,cropinfoSelectApi } from '@/api/select'
import TableCom from '@/components/TableCom'
import PageCom from '@/components/PageCom'
import { getInfo } from '../../../utils/auth'
import InsidePopu from './SteamBox.vue'
export default {
  props: ['showDialog','reshrch'],
  components: {
    TableCom,
    PageCom,
    InsidePopu,
  },
  watch:{
    showAddDialog(newA){
      if(!newA){
        this.pageData.current = 1
        this.getList()
      }
    }
  },
  data() {
    return {
      FatherId:{},
      pageData: {
        current: 1,
        size: 10
      },
      total: 0,
      tableHead: [{
        title: '仓库类型',
        prop: 'warehouseType'
      }, {
        title: '仓号',
        prop: 'warehouseNumber'
      }, {
        title: '垛号',
        prop: 'stampId'
      }, {
        title: '额定仓容(公斤)',
        prop: 'rated'
      }, {
        title: '当前仓容(公斤)',
        prop: 'current'
      }, {
        title: '种类',
        prop: 'cropType'
      }, {
        title: '负责人姓名',
        prop: 'personName'
      }, {
        title: '农场名称',
        prop: 'farmName'
      }, {
        title: '生产队名称',
        prop: 'teamName'
      }],
      clickObj:{},
      delList:[],
      innerVisible:false,
      showInsideDialog:false,
      fatherObj:{},
      tableData: [],
      tableOperate: [{
        title: '关联',
        handle: (row) => {
           if(this.FatherId.warehouseId==row.id){
                    this.$message({
                      type: 'warning',
                      message: '已关联该仓库，请误重复关联！'
                    })
                    this.innerVisible=false;
                    return
                }
          // this.showInsideDialog=true;
          // this.succmBut(row)
          stampGetStamp({
            ...this.FatherId,
            wareId:row.id
          }).then((res)=>{
            if(res.data.length){
              this.$refs.addPopu.tableData=res.data
              this.$refs.addPopu.FatherId=this.fatherObj
              this.showInsideDialog=true;

            }
          })
          // this.clickObj=row
        },
        flag:()=>{
          return true
        }
      }],
    }
  },
  methods: {
    // 关联按钮
    succmBut(){
      console.log(this.FatherId.warehouseId,this.clickObj.id);
    },
    // 修改垛号
    setTableData(data,type){
      this.showInsideDialog=false;
      this.$emit('update:showDialog', false)
    },
    // 刷新表格
    handleRefresh() {
      this.pageData.current = 1
      this.getList()
    },
    // 全选取消全选
    handleSelectAll() {
      this.$refs.tableCom.toggleSelection(this.tableData)
    },
    // 获取表格
    async getList() {
      const { data } = await tableApi({
        warehouseType: '',
        farmCode: '',
        teamCode: '',
        cropType: '',
        warehouseNumber: '',
        rated: '',
        startDate: '',
        endDate: ''
      }, this.pageData)
      this.total = data.total
      this.tableData = data.records
    },
    // 分页
    handleSize(size) {
      this.pageData.current = 1
      this.pageData.size = size
      this.getList()
    },
    handleCurrent(current) {
      this.pageData.current = current
      this.getList()
    },
    // 删除
    async handleDel() {
      await carDelApi(this.delList)
      this.getList()
    },
    setFlage(){
      this.$emit('update:showDialog', false)
      this.reshrch({id:this.FatherId.warehouseId})
      // this.$emit('handleRefresh')
    }
  },
  mounted() {
    this.getList()
  }
}
</script>

<style lang='scss' scoped>
.el-page {
  width: 100%;
  height: calc(100vh - 70px);

  .search-box {
    height: 40px;
    transition: height 0.3s ease;
    overflow: hidden;

    .search-card {
      width: 90%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: relative;

      .arrow {
        cursor: pointer;
        display: inline-block;
        position: absolute;
        right: -100px;
        font-size: 30px;
        transition: transform 0.3s ease;
      }

      .arrow.down {
        transform: rotate(90deg);
      }
    }

    .input-box {
      display: flex;
      align-items: center;
      margin-bottom: 15px;
      transition: height 0.2s ease-in-out;
    }
  }

  .search-box-height {
    height: 90px;
  }

  .operate-box {
    width: 100%;
    background-color: #f5f7fa;
    padding: 8px 5px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .tabulationBox {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
    height: 620px;
    overflow-y: auto;

    .cardPage {
      width: 30%;
      height: 280px;
      margin: 20px;
    }
  }
}

.left {
  // transform: translateX(-100%);
}

.right {
  // transform: translateX(100%);
}

.right-enter {
  transform: translateX(100%);
}

.right-enter-to {
  transform: translateX(0);
}

.right-leave {
  transform: translateX(0);
}

.right-leave-to {
  transform: translateX(100%);
}

.right-enter-active,
.right-leave-active {
  transition: transform 0.5s;
}

.left-enter {
  transform: translateX(-100%);
}

.left-enter-to {
  transform: translateX(0);
}

.left-leave {
  transform: translateX(0);
}

.left-leave-to {
  transform: translateX(-100%);
}

.left-enter-active,
.left-leave-active {
  transition: transform 0.5s;
}
.appendToBody{
  height: 60px;
  width: 100%;
  text-align: center;
  font-size: 16px;
}
.dialog-header{
  color: #16a085;
  font-size: 38px;
  font-weight: 700;
}
</style>
